<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="$t('LocalInformation')" left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <van-icon name="setting-o" size="24" @click="goSetting" />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <div class="homeBox">
        <div class="homeBox_inner">
          <div class="overviewTop_1">
            <div class="overviewTop_1_t">{{yieldToday | units('kWh',1)}}</div>
            <div class="overviewTop_1_b">{{$t('TodayYield')}}</div>
          </div>
          <div class="overviewTop_2"></div>
          <div class="overviewTop_1">
            <div class="overviewTop_2_t">{{yieldTotal | units('kWh',1)}}</div>
            <div class="overviewTop_1_b">{{$t('TotalYield')}}</div>
          </div>
        </div>
      </div>
      <div class="myyuanpan">
        <div class="runBox" v-if="mode!==''&&mode!==undefined">
          <i class="iconfont iconyunhangmoshi"></i> {{mode}}
        </div>
        <div class="myyuanpan_text_1_t">{{$t('Solar')}}</div>
        <div class="myyuanpan_text_1_b" v-if="inverterType!=9">{{Math.abs(pv) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_2_t">{{$t('loadGenerator')}}</div>
        <div class="myyuanpan_text_2_b" v-if="isMeter">{{Math.abs(loadPower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_3_t">{{$t('Feedin')}}</div>
        <div class="myyuanpan_text_3_b" v-if="isMeter&&!isEps">{{Math.abs(feedin) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_4_t">{{$t('Battery')}}</div>
        <div class="myyuanpan_text_4_b" v-if="inverterType==3||inverterType==5||inverterType==9||inverterType==10||inverterType==11||inverterType==12||inverterType==13||inverterType==14||inverterType==15">{{Math.abs(battery) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_5_b">{{Math.abs(inverter) | numFilter(1,'W')}}</div>

        <div class="Z1" v-if="flow[0]"><img src="../../assets/Z1.gif" alt=""/></div>
        <div class="Z2" v-if="flow[1]"><img src="../../assets/Z2.gif" alt=""/></div>
        <div class="F2" v-if="flow[2]"><img src="../../assets/F2.gif" alt=""/></div>
        <div class="Z3" v-if="flow[3]"><img src="../../assets/Z3.gif" alt=""/></div>
        <div class="F3" v-if="flow[4]"><img src="../../assets/F3.gif" alt=""/></div>
        <div class="Z4" v-if="flow[5]"><img src="../../assets/Z4.gif" alt=""/></div>
        <div class="F4" v-if="flow[6]"><img src="../../assets/Z2.gif" alt=""/></div>
        <div class="Z5" v-if="flow[7]"><img src="../../assets/Z5.gif" alt=""/></div>
        <div class="F5" v-if="flow[8]"><img src="../../assets/Z5.gif" alt=""/></div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isLoading:false,
      device_id:sessionStorage.getItem('device_id'),
      service_uuid:'2B00',
      characteristicId:'2B10',
      bdPwd:sessionStorage.getItem('bdPwd'),
      inverterType:'',
      transportType:'',
      isMeter:false,
      yieldToday:'',
      yieldTotal:'',
      pv:'',
      loadPower:'',
      feedin:'',
      grid:'',
      battery:'',
      inverter:'',
      isEps:false,
      flow:[],
      mode:''
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/localin'});
    },
    goSetting(){
      this.$router.push({path:'/bluetoothsetting'});
    },
    async getCurrentData(){
      this.comm.loadingShow();
      let data = await this.SETAPI.LocalIn({'optType':'ReadRealTimeData','pwd':this.bdPwd});
      if(data!=null&&data!=undefined){
        //根据机型判断设置项是否展示
        this.inverterType=data['Information'][1];
        localStorage.setItem('inverterType',this.inverterType);
        this.transportType=data['Information'][9];
        if(this.inverterType>=8){
          localStorage.setItem('transportType',1);
        }else{
          localStorage.setItem('transportType',this.transportType);
        }
        /*获取当前页面数据*/
        this.getPub(data['Data']);
      }else{
        this.comm.tipsShow('InvNoResponse');
      }
    },
    //透传
    getPub2(datas){
      let newDatas=this.invAdres.getRealTimeData(this.inverterType,datas);
      this.yieldToday=newDatas.Yield_Today.value;
      this.yieldTotal=newDatas.Yield_Total.value;
      this.pv=newDatas.PowerDc1.value+newDatas.PowerDc2.value+newDatas.PowerDc3.value+newDatas.PowerDc4.value+newDatas.PowerDc5.value+newDatas.PowerDc6.value+newDatas.PowerDc7.value+newDatas.PowerDc8.value+newDatas.PowerDc9.value+newDatas.PowerDc10.value+newDatas.PowerDc11.value+newDatas.PowerDc12.value;
      this.battery=newDatas.BAT_Power.value;
      this.feedin=newDatas.feedInPower.value;
      this.grid=newDatas.GridAPower.value+newDatas.GridBPower.value+newDatas.GridCPower.value;
      this.loadPower=this.grid-this.feedin;
      //判断是否接电表
      let FeedInEnergy=newDatas.FeedInEnergy.value;
      let ConsumeEnergy=newDatas.ConsumeEnergy.value;
      if(this.feedin!=0 || FeedInEnergy!=0 ||ConsumeEnergy!=0){
        this.isMeter=true;
      }else{
        this.isMeter=false;
      }
      //判断当前运行模式
      this.mode=(this.workMode.getWorkMode(this.inverterType))[newDatas.RunMode.value];
      let eps=newDatas.RunMode.value;
      if(eps==7){
        this.isEps=true;
        this.inverter=newDatas.EPSAPower.value+newDatas.EPSBPower.value+newDatas.EPSCPower.value;
      }else {
        this.isEps=false;
        this.inverter=this.grid;
      }
      this.flow=this.comm.MyFlowChar(this.feedin,this.grid,this.pv,this.battery,this.loadPower,this.inverter,this.isMeter);
    },
    onRefresh(){
      this.isLoading=false;
      this.getCurrentData();
    }
  },
  mounted(){
    //开启通知
    ble.startNotification(this.device_id, this.service_uuid, this.characteristicId, (datas)=>{
        let buffer=new Uint8Array(datas);
        alert(JSON.stringify(buffer));
    }, (err)=>{
        this.comm.tipsShow('无法开启通知，请稍后再试!');
    });
    this.getCurrentData();
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
.homeBox{
  width: 100%;
}
.homeBox_inner{
  width:100%;
  height: 70px;
  background: #3B3D4E;
}
.overviewTop_1{
  width: 50%;
  text-align: center;
  float: left;
}
.overviewTop_1_t{
  color: #FFD925;
  font-size:22px;
}
.overviewTop_1_b{
  color: #FFFFFF;
  font-size:12px;
  padding-top: 5px;
}
.overviewTop_2{
  position: absolute;
  top:10px;
  left: 50%;
  margin: 0 auto;
  height: 40px;
  border-left: 1px solid #FFFFFF;
}
.overviewTop_2_t{
  color: #22B149;
  font-size:22px;
}
.myyuanpan{
  position: relative;
  color: #7A7A7A;
  width: 310px;
  height: 350px;
  margin: 60px auto 50px;
  background: url("../../assets/local.png") no-repeat center;
  background-size: 100% 100%;
  z-index:1;
}
.myyuanpan_text_1_t{
  position: absolute;
  width:95px;
  top:100px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_1_b{
  width:95px;
  position: absolute;
  top:66px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_2_t{
  position: absolute;
  width:120px;
  top:354px;
  right:-11px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_2_b{
  position: absolute;
  width:95px;
  top:318px;
  right:2px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_3_t{
  width:100px;
  position: absolute;
  top:354px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_3_b{
  width:95px;
  position: absolute;
  top:318px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_4_t{
  position: absolute;
  width:95px;
  top:100px;
  right:1px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_4_b{
  position: absolute;
  width:95px;
  top:66px;
  right:2px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_5_b{
  position: absolute;
  width:95px;
  top:190px;
  left:108px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.Z1 img,.Z2 img,.F2 img,.Z3 img,.F3 img,.Z4 img,.F4 img,.Z5 img,.F5 img{
  width: 310px;
  height: 350px;
}
.Z1{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index:1;
}
.Z2{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index:1;
}
.F2{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index: 1;
}
.Z3{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index:1;
}
.F3{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index:1;
}
.Z4{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index: 1;
}
.F4{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index:1;
  transform: rotateX(-180deg);
}
.Z5{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index: 1;
}
.F5{
  position: absolute;
  width: 310px;
  height: 350px;
  z-index: 1;
  transform: rotateY(180deg);
}
.runBox{
  top:-42px;
  position: absolute;
  padding: 5px 10px;
  float: left;
  background: #eaeaea;
  border-radius: 20px;
  color: #ef7025;
}
</style>
